Declaré una variable var scale=0.8 en un script en el cuerpo de mi html y cuando cambio el tamaño de un gráfico hecho por mermaid, actualizo la escala en consecuencia, por ejemplo
<script> var scale=0.8; DeployGraph(); function toggleZoomScreen(mode){ if (mode == 1){ scale+=0.1; // document.body.style.zoom=scale.toString()+"%"; } else if (mode == 2){ scale-=0.1; // document.body.style.zoom=scale.toString()+"%"; } var mer = document.getElementById("mermaid"); mer.style.transform= "scale("+scale+","+scale+")"; } </script>De alguna manera quiero mantener el valor de la variable para que cada vez que actualice, se llame a DeployGraph y el gráfico cambie de tamaño en ese mismo valor de escala. DeployGraph se declara en el encabezado del html, no en el cuerpo. Se puede hacer esto?
Intenté crear una variable diferente en el encabezado y actualizarla cada vez que cambia el valor de la escala, luego en DeployGraph uso element.style.transform= "scale("+scale+","+scale+")"; donde elemento = documento.getElementById("sirena"); Sin embargo, el valor es siempre el predeterminado.
No puede persistir las variables en las actualizaciones de la página.
Lo que debe hacer es almacenar el valor que necesita en el navegador y verificarlo una vez que se carga la página.
Puede hacerlo utilizando parámetros de búsqueda de URL , cookies o almacenamiento local .
Al usar el almacenamiento local, puede hacer lo siguiente:
// On document load, after initialising the scale variable scale = window.localStorage.getItem('scale') || 0.8; // add || 0.8 in case value is undefined // In toggleZoomScreen function toggleZoomScreen(mode){ if (mode == 1){ scale+=0.1; } else if (mode == 2){ scale-=0.1; } // Update the value in local storage window.localStorage.setItem('scale', scale); var mer = document.getElementById("mermaid"); mer.style.transform= "scale("+scale+","+scale+")"; }